<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<link rel="stylesheet" type="text/css" href="css/article.css"/>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<title>诗文</title>
	</head>
	<body>
		<div id="article">
			<div class="title">
				{{list.title}}
			</div>
			<div class="author">
				{{list.author}}
			</div>
			<div class="content">
				<div v-html="list.content"></div>
			</div>
			<div class="version">
				<div v-html="list.note"></div>
			</div>
			<!-- 前往看视频 -->
			<div class="lookVideo animated rubberBand" @click="route(1)">
				观看视频
			</div>
		</div>
	</body>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#article",
			data:{
				list:{
					title:"风",
					author:'[唐] 李峤',	
					content:`<div class="item_content" id="zs_content"><div><span></span><span style="border-bottom: 1px solid #999;margin: 0 1px;" class="zhushi_word">解</span><span>落</span><span style="border-bottom: 1px solid #999;margin: 0 1px;" class="zhushi_word">三秋</span><span>叶，能开</span><span style="border-bottom: 1px solid #999;margin: 0 1px;" class="zhushi_word">二月</span><span>花。</span></div><div><span></span><span style="border-bottom: 1px solid #999;margin: 0 1px;" class="zhushi_word">过</span><span>江千尺浪，入竹万竿</span><span style="border-bottom: 1px solid #999;margin: 0 1px;" class="zhushi_word">斜</span><span>。</span></div></div>`,
					note:`<div class="shangxi_content">【注释】：<br>三秋：晚秋，指农历九月。<br>二月：早春，农历二月。<br><br>【简析】：<br>这首诗让人看到了风的力量：风，能使晚秋的树叶脱落，能催开早春二月的鲜花，它经过江河时能掀起千尺巨浪，刮进竹林时可把万棵翠竹吹得歪歪斜斜。<br><br> </div>`
				}
			},
			methods:{
				route(id){
					window.location.href="video.html"
				},
			}
		})
	</script>
</html>
